/**
 * Created by Administrator on 2017/6/28.
 */
/**
 * Created by Administrator on 2017/6/28.
 */

import React from 'react'
import {
    Text,View,Image,StatusBar,TouchableHighlight,TouchableOpacity
} from 'react-native'

let user_bc = require('../.././Img/porfile_bg.png')
let user_head = require('../.././Img/head_default.png')
let item_qr = require('../.././Img/icon_center_qr.png')
let item_shop = require('../.././Img/icon_center_shop.png')
let item_tong = require('../.././Img/icon_chenter_tong_ji.png')
let item_set = require('../.././Img/icon_center_setting.png')
let card_msg = require('../.././Img/icon_center_msg.png')
let card_profit = require('../.././Img/icon_center_profit.png')
let card_review = require('../.././Img/icon_center_review.png')
let mWidth = require('Dimensions').get('window').width/3-1;

export default class TabPage_3 extends React.Component{
    static navigationOptions =({navigation}) =>({
        headerStyle: {
            height: 0,
        },
    })
    render(){

        return(
            <View style={{flex:1}}>
                <StatusBar
                backgroundColor={'transparent'}
                hidden={false}
                translucent={true}/>
                <Image source={user_bc} style={{width:'100%',height:190,flexDirection:'column',alignItems:'center'}}>
                    <TouchableOpacity onPress={()=>this.props.navigation.navigate('userInfo')}>
                        <Image source={user_head} style={{width:80,height:80,borderRadius:45,marginTop:50}}/>

                    </TouchableOpacity>
                    <Text style={{marginTop:20}}>伊斯塔里战神</Text>
                </Image>

                <View style={{flexDirection:'row'}}>
                    <TouchableHighlight onPress={()=>{this.props.navigation.navigate('messageList')}}>
                        <CardView itemName="消息" itemImg = {card_msg} itemContent="5未读"/>
                    </TouchableHighlight>
                    <View style={{backgroundColor:'#e3e3e3',width:1,marginTop:4,marginBottom:4}}/>
                    <TouchableOpacity onPress={()=>this.props.navigation.navigate('profit')}>
                        <CardView itemName="收益" itemImg = {card_profit}itemContent="￥500"/>
                    </TouchableOpacity>

                    <View style={{backgroundColor:'#e3e3e3',width:1,marginTop:4,marginBottom:4}}/>
                    <CardView itemName="评论" itemImg = {card_review}itemContent="10+新增"/>
                </View>
                <View style={{backgroundColor:'#E3E3E3',height:1}}/>
                <View>
                    <ItemView itemName="二维码" itemImg ={item_qr}></ItemView>
                    <ItemView itemName="商铺设置" itemImg ={item_shop}></ItemView>
                    <ItemView itemName="订单分析" itemImg ={item_tong}></ItemView>
                    <ItemView itemName="系统设置" itemImg ={item_set}></ItemView>
                </View>

            </View>
        )
    }
}

class CardView extends React.Component{

    setNativeProps(nativeProps) {
        this._root.setNativeProps(nativeProps);
    }

    render(){
        return(
            <View ref={component => this._root = component} style={{flexDirection:'column',alignItems:'center',justifyContent:'center',width:mWidth,backgroundColor:'#fff'}}>
                <Text style={{marginTop:8, color:'#F1982F'}}>{this.props.itemContent}</Text>
                <View style={{flexDirection:'row',marginTop:5,marginBottom:8,alignItems:'center'}}>
                    <Image source={this.props.itemImg} style={{width:14,height:14}}/>
                    <Text style={{marginLeft:6}}>{this.props.itemName}</Text>
                </View>
            </View>
        )
    }
}

class ItemView extends React.Component{
    render(){
        return(
            <View style={{width:'100%',height:50, flexDirection:'column',justifyContent:'center'}}>
                <View style={{width:'100%',height:49,flexDirection:'row',alignItems:'center',justifyContent:'space-between',backgroundColor:'#fff'}}>
                    <View style={{flexDirection:'row',width:200}}>
                        <Image source={this.props.itemImg}
                               style={{width:18,height: 18,marginLeft:25}}/>
                        <Text style={{marginLeft:8,fontSize:16,width:'100%',marginRight:35}}>
                            {this.props.itemName}
                        </Text>
                    </View>
                    <Image style={{alignItems:'flex-end',marginRight:12}} source={require('../.././Img/btn_xiala_hui@2x.png')}/>
                </View>
                <View style={{
                    height: 1,
                    marginRight:16,
                    backgroundColor: '#E3E3E3',
                    marginLeft: 35
                }}/>
            </View>
        )
    }
}